<template>
      <div id="hover">
            <div class="container">
                  <!-- xuanfu -->
                  <div class="btngroup">
                        <div class="item" :class="{'active': act == index}" @mouseover="onHover(index)" v-for="(item, index) in navlist" :key="index">
                              {{ item }}
                        </div>
                       
                  </div>

                  <!-- content -->
                  <div class="content">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="itembox" v-if="act == index">
                                    <img :src="item.ban" class="bgimg" alt="">
                                    <div class="infobox">
                                          <div class="name">{{item.name }}</div>
                                          <div class="info">{{ item.info }}</div>
                                          <div class="iconbox">
                                                <img :src="imgs.item" alt="" v-for="(imgs, inx) in item.icon" :key="inx">
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    ban: require("../../assets/img/h1.png"),
                                    name: "蜻蜓支付",
                                    info: "刷脸支付解决方案是以AI智能视觉算法为核心，对线下零售场景中的消费人群商品、场景、终端等要素进行全方位的数字化升级，真正实现线下零售从数据采集存储、分析到店铺智能化管理。",
                                    icon: [
                                          { item: require("../../assets/img/h11.png") },
                                          { item: require("../../assets/img/h12.png") },
                                          { item: require("../../assets/img/h13.png") },
                                    ]
                              },
                              {
                                    ban: require("../../assets/img/h2.png"),
                                    name: "青蛙支付",
                                    info: "让支付更加简单、配备3D结构光的摄像头模组一安全、稳定，机型小巧、随放随用,L型的一体化设计机身占地面积小，设计干争利落。体验度较好，用户较易接受配备丰富的连接接口，支持连接多种外接设备，通过软件的升级让设备不断作功能扩展和升级。",
                                    icon: [
                                          { item: require("../../assets/img/h21.png") },
                                          { item: require("../../assets/img/h22.png") },
                                          { item: require("../../assets/img/h23.png") },
                                    ]
                              },
                              {
                                    ban: require("../../assets/img/h3.png"),
                                    name: "二维码支付",
                                    info: "支付扫码付款，无需收银台，扫码枪等硬件 (需申请开通“扫码付”功能，获得“扫码付二维码”)输入消费金额，和收银员核对确认付款“扫码付”只要三步轻松搞定，支付就是这么简单",
                                    icon: [
                                          { item: require("../../assets/img/h31.png") },
                                          { item: require("../../assets/img/h32.png") },
                                          { item: require("../../assets/img/h33.png") },
                                    ]
                              },
                              {
                                    ban: require("../../assets/img/h4.png"),
                                    name: "收款王支付",
                                    info: "即插即用安全稳定，多通道支付。专业技术团队开发维护系统，商超收银无需等待适用于学校食堂、单位食堂、快餐店等场景",
                                    icon: [
                                          { item: require("../../assets/img/h41.png") },
                                          { item: require("../../assets/img/h42.png") },
                                          { item: require("../../assets/img/h43.png") },
                                    ]
                              },
                              {
                                    ban: require("../../assets/img/h5.png"),
                                    name: "扫码台支付",
                                    info: "即插即用 稳定性强支持系统windows/iOS/android/Liunx,颜而有实 提升支付体验45°人性化扫码角度，全铝合金外框，时尚美观支持微信/支付宝扫码收款，消费者出示付款码即可。支付限额动态扫码机制，告别支付限额。",
                                    icon: [
                                          { item: require("../../assets/img/h51.png") },
                                          { item: require("../../assets/img/h52.png") },
                                          { item: require("../../assets/img/h53.png") },
                                    ]
                              },
                        ],
                        act: "0",
                        navlist: ["蜻蜓支付", "青蛙支付", "二维码支付", "收款王支付", "扫码台支付"],
                  }
            },
            methods: {
                  onHover(index) {
                        this.act = index
                  }
            },
      }
</script>

<style lang="scss" scoped>

#hover {
      max-width: 1920px;
      margin: 0 auto;
      margin-top: 80px;
      .container {
            width: 100%;
            position: relative;
            left: 0;
            top: 0;
            
            .btngroup {
                  width: 170px;
                  text-align: center;
                  position: absolute;
                  right: 230px;
                  top: 100px;
                  z-index: 100;
                  border-radius: 20px;
                  overflow: hidden;
                  .item {
                        width: 100%;
                        height: 60px;
                        font-size: 20px;
                        text-align: center;
                        border-bottom: 1px solid #f3f3f3;
                        background-color: #fff;
                        color: #000;
                        line-height: 60px;
                        cursor: pointer;
                  }
                  .active {
                        background-color: #1c9ff2;
                        color: #fff;
                  }
            }
            .content {
                  width: 100%;
                  height: 600px;
                  overflow: hidden;
                  
                  .item {
                        width: 100%;
                        .itembox {
                              width: 100%;
                              position: relative;
                              left: 0;
                              top: 0;
                              .bgimg {
                                    width: 1920px;
                                    height: 600px;
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    z-index: -1;
                              }
                              .infobox {
                                    color: #fff;
                                    width: 900px;
                                    margin: 0px auto;
                                    padding-left: 100px;
                                    // padding-top: 60px;
                                    text-shadow: 0 0 5px #000;
                                    display: flex;
                                    height: 600px;
                                    flex-direction: column;
                                    justify-content: center;
                                    .name {
                                          font-size: 30px;
                                          line-height: 50px;

                                          // padding: 20px;
                                          border: 1px solid #fff;
                                          width: 180px;
                                          height: 50px;
                                          text-align: center;
                                    }
                                    .info {
                                          margin: 30px 0;
                                          font-size: 20px;
                                          line-height: 30px;
                                          letter-spacing: 1px;
                                    }
                                    .iconbox {
                                          display: flex;
                                          margin-top:30px;
                                          justify-content: space-around;
                                    }
                              }
                        }
                  }
            }
      }
}

</style>